<template>
	<div id="inv">
		<hr style="height:1px;border:none;border-top:1px solid #555555;" />
		<el-row>
			<div id="top">
				<div id="invtop-left1">
					<el-button type="info" icon="el-icon-receiving" size="small">打印</el-button>
				</div>
				<!-- <div id="invtop-left1">
					<el-button type="info" icon="el-icon-edit" size="small" @click="dialogFormVisible = true">修改</el-button>
				</div> -->
				<!-- <div id="invtop-left1">
					<el-button type="info" icon="el-icon-delete" size="small" @click="dialogFormVisible = true">删除</el-button>
				</div> -->
				<div id="invtop-left1">
					<el-button type="info" icon="el-icon-refresh" size="small" @click="winReload">刷新</el-button>
				</div>
			</div>
		</el-row>
		<el-row>
			<div id="trhead-left1">
				仓库
				<el-select v-model="pickware" clearable placeholder="请选择" @change="getwar">
					<el-option v-for="item in warNames" :key="item.warId" :label="item.warName" :value="item.warName">
					</el-option>
				</el-select>
			</div>
			<div id="trhead-left1">
				库存分类
				<el-select v-model="pickkind" clearable placeholder="请选择" @change="getwar">
					<el-option v-for="item in kind" :key="item.kinId" :label="item.kinName" :value="item.kinName">
					</el-option>
				</el-select>
			</div>
			<div id="trhead-left2">
				产品
			</div>
			<div id="trhead-left1">
				<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="search">
				</el-input>
			</div>
		</el-row>
		<el-row>
			<div align="center">
				<el-table stripe :data="tableinventory.filter(data => !search || data.proId.toLowerCase().includes(search.toLowerCase())) "
				 border style="width: 95%" height="600" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
					<el-table-column fixed prop="invStatic" label="状态" width="100">
					</el-table-column>
					<el-table-column fixed prop="proPic" label="图片" width="100">
					</el-table-column>
					<el-table-column fixed prop="invId" label="库存编号" width="140">
					</el-table-column>
					<el-table-column fixed prop="proId" label="产品名称" width="180">
					</el-table-column>
					<el-table-column fixed prop="proSpe" label="产品规格" width="160">
					</el-table-column>
					<el-table-column prop="warName" label="仓库名称" width="140">
					</el-table-column>
					<el-table-column prop="kinName" label="存货分类" width="140">
					</el-table-column>
					<el-table-column prop="proUnit" label="单位" width="180">
					</el-table-column>
					<el-table-column prop="invUnit" label="库存单位" width="180">
					</el-table-column>
					<el-table-column prop="invNum" label="现存量" width="180">
					</el-table-column>
					<el-table-column prop="invLow" label="低库存预警" width="180">
					</el-table-column>
					<el-table-column prop="invHeight" label="积压库存预警" width="180">
					</el-table-column>
					<el-table-column prop="invNote" label="备注" width="180">
					</el-table-column>
					<el-table-column align="right" width="160">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">设置</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog title="设 置" :visible.sync="dialogFormVisible1">
					<el-form :model="form" label-width="100px">
						<el-form-item label="低库存预警数">
							<el-input v-model="form.invLow" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="积压库存预警数">
							<el-input v-model="form.invHeight" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" :rows="3" v-model="form.invNote" autocomplete="off" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer" style="height: 50px;">
						<el-button @click="dialogFormVisible1 = false">取 消</el-button>
						<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
					</div>
				</el-dialog>
			</div>
		</el-row>
		<el-row>
			<div align="center" style="margin-top: 20px; margin-bottom: 60px;">
				<el-pagination background layout="prev, pager, next" :total="200"></el-pagination>
			</div>
		</el-row>
		<el-row>
			<hr style="height:1px;border:none;border-top:1px solid #555555;" />
			<div id="top">
				<div id="invtop-left1">
					<el-button type="info" icon="el-icon-receiving" size="small" @click="addloss">报损</el-button>
				</div>
			</div>
		</el-row>
		<el-row>
			<div align="center">
				<el-table :data="tableloss" style="width: 95%" :default-sort="{prop: 'los_date', order: 'descending'}">
					<el-table-column prop="losStatic" label="状态" sortable width="180">
					</el-table-column>
					<el-table-column prop="losDate" label="报损日期" sortable width="180">
					</el-table-column>
					<el-table-column prop="losId" label="报损编号" sortable width="180">
					</el-table-column>
					<el-table-column prop="proId" label="产品编号" sortable width="180">
					</el-table-column>
					<el-table-column prop="proName" label="产品名称" sortable width="180">
					</el-table-column>
					<el-table-column prop="warName" label="报损仓库" sortable width="180">
					</el-table-column>
					<el-table-column prop="losNum" label="数量" sortable width="180">
					</el-table-column>
					<el-table-column prop="losWhy" label="造成原因" sortable width="180" :formatter="formatter3">
					</el-table-column>
					<el-table-column prop="losWay" label="损失处理" sortable width="180" :formatter="formatter1">
					</el-table-column>
					<el-table-column prop="losNote" label="备注" sortable width="180" :formatter="formatter2">
					</el-table-column>
					<el-table-column align="right" width="240">
						<template slot-scope="scope">
							<el-button size="mini" @click="staticEdit(scope.$index, scope.row)">审核</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog title="仓库报损" :visible.sync="dialogFormVisible">
					<el-form :model="form" label-width="100px">
						<el-form-item label="产品名称">
							<el-select v-model="form.proId" clearable placeholder="请选择">
								<el-option v-for="item in product" :key="item.proId" :label="item.proName" :value="item.proName">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="出库仓库">
							<el-select v-model="form.warName" placeholder="请选择">
								<el-option v-for="item in warNames2" :key="item.warId" :label="item.warName" :value="item.warName"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="数量">
							<el-input-number v-model="form.losNum" :min="1" :max="2000" label="描述文字"></el-input-number>
						</el-form-item>
						<el-form-item label="原因">
							<el-input v-model="form.losWhy" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="处理方式">
							<el-input v-model="form.losWay" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" :rows="3" v-model="form.losNote" autocomplete="off" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer" style="height: 50px;">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button v-show="!isedit" type="primary" @click="sureAddLoss">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</el-row>
		<el-row>
			<div align="center" style="margin-top: 20px; margin-bottom: 60px;">
				<el-pagination background layout="prev, pager, next" :total="200"></el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				losNum: 1,
				search: '',
				pickware: '',
				pickkind: '',
				input2: '',
				value1: '',
				value2: '',
				product: [],
				kind: [],
				warNames: [{
					value: '选项1',
					label: '全部仓库'
				}],
				warNames2: [],
				options2: [],
				tableinventory: [],
				tableloss: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				form: {
					proId: '',
					losWhy: '',
					losWay: '',
					warName: '',
					losNum: '',
					losNote: ''
				},
				//选择种类
				types: [],
				isedit: false,
				myindex: -1
			}
		},
		mounted() {
			var _this = this;
			this.$axios.post("findInventoryAndLoss").then(res => {
				if (res.data) {
					_this.tableinventory = res.data.inventory;
					_this.tableloss = res.data.loss;
					_this.warNames = res.data.warNames;
					_this.warNames2 = res.data.warNames2;
					_this.product = res.data.product;
					_this.kind = res.data.kind;
				} else {
					alert("出错了！！");
				}

			}).catch(ex => {
				alert("出错了8888");
			})
		},
		methods: {
			//刷新页面s
			winReload: function(cond) {
				this.$router.go(0);
			},
			formatter1(row, column) {
				return row.losWay;
			},
			formatter2(row, column) {
				return row.losNote;
			},
			formatter3(row, column) {
				return row.losWhy;
			},
			add() {
				this.dialogFormVisible = true;
			},
			addloss() {
				this.form = {
					proId: '',
					losWhy: '',
					losWay: '',
					warName: '',
					losNum: '',
					losNote: ''
				}
				this.dialogFormVisible = true;
			},
			sureAddLoss() {
				//确认添加
				this.$axios.post("addloss", this.form).then(v => {
					console.log(v)
					if (v.data) {
						this.key2 = v.data.ans;
						if (this.key2 == 'y') {
							alert("报损成功！！");
							this.$router.push("/inventory");
						} else {
							alert("报损出错,产品不存在!!");
						}
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				this.dialogFormVisible = false;
				this.tableloss.push(this.form);
			},
			//修改
			handleEdit(index, row) {
				this.isedit = true;
				this.dialogFormVisible1 = true;
				this.form = {
					invId: row.invId,
					invLow: row.invLow,
					invHeight: row.invHeight,
					invNote: row.invNote,
				};
				this.myindex = index;
			},
			//确认修改
			sureUpdate: function() {
				this.$axios.post("editInventory", this.form).then(v => {
					console.log(v)
					if (v.data) {
						alert("修改成功！！")
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				//根据form.id确认要修改的webs的id值
				this.tableinventory.splice(this.myindex, 1, this.form);
				//确认修改
				this.dialogFormVisible1 = false;
				this.isedit = false; //修改状态结束
			},
			//删除
			handleDelete(index, row) {
				var _this = this;
				this.$confirm(
					"你确定要删除该数据吗？",
					"温馨提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					this.$axios.post("delloss?losId=" + row.losId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("删除部门成功！！");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//index是索引，id是数据key值
					_this.tableloss.splice(index, 1);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})

			},
			//审核
			staticEdit(index, row) {
				var _this = this;
				this.$confirm(
					"确认审核[" + row.losId + "]单据吗",
					"温馨提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					_this.$message({
						type: "success",
						message: "审核通过"
					});

					this.$axios.post("losspass?losId=" + row.losId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("审核通过");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//根据form.id确认要修改的webs的id值
					this.tableloss.splice(this.myindex, 1, this.row);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})

			},
			//触发事件
			getwar: function() {
				alert('您选择了' + this.pickware + '并且选择了' + this.pickkind);
				var _this = this;
				this.$axios.post("findInventoryAndLoss?warName=" + this.pickware + "&kinName=" + this.pickkind + '').then(res => {
					if (res.data) {
						_this.tableinventory = res.data.inventory;
						_this.tableloss = res.data.loss;
						_this.warNames = res.data.warNames;
						_this.warNames2 = res.data.warNames2;
					} else {
						alert("出错了！！");
					}

				}).catch(ex => {
					alert("出错了8888");
				})
			},
			getkind: function() {
				alert('您选择了' + this.pickkind);
				var _this = this;
				/* this.$axios.post("findInventoryAndLoss?warName=" + this.pickware + "").then(res => {
					if (res.data) {
						_this.tableinventory = res.data.inventory;
						_this.tableloss = res.data.loss;
						_this.warNames = res.data.warNames;
						_this.warNames2 = res.data.warNames2;
					} else {
						alert("出错了！！");
					}
			
				}).catch(ex => {
					alert("出错了8888");
				}) */
			},
		}
	}
</script>

<style>
	#inv {
		margin: 5px 15px 5px 15px;
	}

	#top {
		width: 100%;
		height: 50px;
		border: 1px solid #FF0000;
	}

	#trhead-left1 {
		margin: 10px 15px 8px 5px;
		float: left;
	}

	#trhead-left2 {
		margin-top: 18px;
		float: left;
	}

	#invtop-left1 {
		width: 50px;
		margin-top: 7px;
		margin-left: 40px;
		float: left;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
</style>
